<template>
  <view class="bgWhite">
    <view class="plr18 ptb15 radius15 flex-row align-center justify-between">
      <text class="border ft15">选择药库</text>
      <view class="light4 align-center">
        <text class="pr10">剂型介绍</text>
        <uv-icon size="7" color="#4A8993" name="arrow-right"></uv-icon>
      </view>
    </view>
    <uv-vtabs
      :chain="true"
      :list="medicines"
      :height="height"
      :current="selectIndex"
      hdHeight="100rpx"
      @change="onChangeDrug"
      barBgColor="#ffffff"
      :barItemStyle="{background: '#ffffff',color: '#5F6680',fontWeight: 'border'}"
      :barItemActiveLineStyle="{background: '#F6F7FB'}"
      :barItemActiveStyle="{background: '#F6F7FB', color: '#4A8993'}"
      :contentStyle="{background: '#F6F7FB'}"
    >
      <template v-for="(item,index) in supplies">
        <uv-vtabs-item :index="index" :key="index">
          <view
            :style="{background:index===itemIndex ? '#E6F1F2' : ''}"
            class="flex-row plr18 ptb12 align-center justify-between"
            @click="onSelectItem(index)"
          >
            <view :class="{'flex-col': true, 'light' : index===itemIndex} ">
              <text class="mb5 border ft15">{{item.name}}</text>
              <text class="ft10">发货地：{{item.desc}}</text>
            </view>
            <view class="flex-row justify-center gray5">
              <text class="pr10">简介</text>
              <uv-icon size="4" color="#5F6680" name="arrow-right"></uv-icon>
            </view>
          </view>
          <view class="plr15" v-if="index !== medicines.length">
            <uv-gap bg-color="#1C274C" customStyle="opacity: 0.15;" height="1"></uv-gap>
          </view>
        </uv-vtabs-item>
      </template>
    </uv-vtabs>
  </view>
</template>

<script>
import api from "@/common/api.js";

export default {
  props: {
    medicines: {
      type: Array,
      default: () => []
    },
    supplies: {
      type: Array,
      default: () => []
    },
	
  },
  data() {
    return {
      selectIndex: 0,
      itemIndex: -1,
      list: [{ name: "经典方" }, { name: "常用方" }, { name: "历史方" }],
    };
  },
  computed: {
    height() {
      return uni.getSystemInfoSync().windowHeight * 0.6;
    }
  },
	  
  
  created() {},
  methods: {
    async getSelectData(supplierId, dosageFormId) {
      const medicines = await this.getAllSupplies();
      const item = medicines.find(i => i.value == supplierId);
      if (item) {
        const re = await this.getSupplyById(item.supplierId);
        const data = re.find(i => i.value == dosageFormId) || {};
        return {
          ...data,
          dosageName: item.name
        };
      }
      return null;
    },
    onChange(e) {
      console.log(e);
    },
    async onChangeDrug(index) {
      console.log(index);
      this.selectIndex = index;
      const item = this.medicines[index];
      this.$emit("onChangeSupply", item.value);
    },
    onSelectItem(index) {
      this.itemIndex = index;
      const item = {
        ...this.supplies[index],
        dosageName: this.medicines[this.selectIndex].name,
        dosageId: this.medicines[this.selectIndex].value
      };
      this.$emit("onConfirm", item);
    },
	//编辑药材时默认回显
	setDefaultIndex(data){
			let index = this.medicines.findIndex(item=> item.value==data)
			this.selectIndex= index
	}
  }
};
</script>
	
<style>
</style>